<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { getPointTotal, getTotal } from '@/api/building'

const user = JSON.parse(localStorage.getItem('user')).user

defineProps({
  visible: Boolean,
})

const tableData = ref([])
const pointTableData = ref([])
const loading = ref(false)
const pointLoading = ref(false)

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}
const activeName = ref('build')
const handleDialogOpen = () => {
  activeName.value = 'build'
  getTableData()
  getPointTableData()
}

const testData = {
  area_name: '万盛经开区',
  digitalcount: 0,
  energycount: 0,
  floorcount: 0,
  gascount: 6,
  kitchencount: 0,
  oldelevatorcount: 0,
  oldothercount: 0,
  pipelinecount: 0,
  protectcount: 0,
  structurecount: 0,
  watercount: 0,
}

const tableColumnProps = [
  {
    label: '区县',
    prop: 'area_name',
  },
  {
    label: '隐患总数',
    prop: 'totalCount',
  },
  {
    label: '1、存在结构与使用安全隐患的楼栋',
    prop: 'structurecount',
  },
  {
    label: '2、存在燃气安全隐患问题的楼栋',
    prop: 'gascount',
  },
  {
    label: '3、存在楼道安全隐患问题',
    prop: 'floorcount',
  },
  {
    label: '4、存在围护安全隐患的住宅数量',
    prop: 'protectcount',
  },
  {
    label: '5、住宅没有独立厨房、卫生间的楼栋',
    prop: 'kitchencount',
  },
  {
    label: '6、需要进行适老化改造的住宅数量(栋)-6层以上未安装电梯',
    prop: 'oldelevatorcount',
  },
  {
    label: '6、需要进行适老化改造的住宅数量(栋)-其他适老化不足',
    prop: 'oldothercount',
  },
  {
    label:
      '7、存在给水管线跑冒滴漏，电力电线老化破损及裸露、私搭乱接等问题的楼栋',
    prop: 'pipelinecount',
  },
  {
    label: '8、入户水质不达标、水压不足的问题的楼栋',
    prop: 'watercount',
  },
  {
    label: '9、需要进行节能改造的住宅数量',
    prop: 'energycount',
  },
  {
    label: '10、需要进行数字化改造的住宅数量',
    prop: 'digitalcount',
  },
]

const getTableData = async () => {
  loading.value = true
  const res = await getTotal()
  tableData.value =
    res.data
      ?.map((item) => {
        return {
          ...item,
          totalCount:
            item.structurecount +
            item.gascount +
            item.floorcount +
            item.protectcount +
            item.kitchencount +
            item.oldelevatorcount +
            item.oldothercount +
            item.pipelinecount +
            item.watercount +
            item.energycount +
            item.digitalcount,
        }
      })
      .sort((a, b) => b.totalCount - a.totalCount) || []
  console.log(res.data)
  loading.value = false
}

const getPointTableData = async () => {
  pointLoading.value = true
  const res = await getPointTotal()
  pointTableData.value =
    res.data
      ?.map((item) => {
        return {
          ...item,
          totalCount:
            item.structurecount +
            item.gascount +
            item.floorcount +
            item.protectcount +
            item.kitchencount +
            item.oldelevatorcount +
            item.oldothercount +
            item.pipelinecount +
            item.watercount +
            item.energycount +
            item.digitalcount,
        }
      })
      .sort((a, b) => b.totalCount - a.totalCount) || []
  console.log(res.data)
  pointLoading.value = false
}
</script>

<template>
  <el-dialog
    :visible="visible"
    class="building-total-table-dialog"
    title="隐患楼宇统计"
    width="80%"
    @close="handleClose"
    @opened="handleDialogOpen"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="隐患楼宇" name="build"> </el-tab-pane>
      <el-tab-pane label="隐患点" name="point"> </el-tab-pane>
      <el-table
        :data="activeName === 'build' ? tableData : pointTableData"
        style="width: 100%"
        border
        height="600"
        v-loading="activeName === 'build' ? loading : pointLoading"
      >
        <template v-for="column in tableColumnProps">
          <el-table-column
            :key="column.prop"
            :label="column.label"
            :prop="column.prop"
          />
        </template>
      </el-table>
    </el-tabs>
  </el-dialog>
</template>

<style lang="scss">
.building-total-table-dialog {
  .query-content {
    margin-bottom: 15px;
  }

  .el-dialog__body {
    padding-top: 15px;
  }
}
</style>
